<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../bootstrap-3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../iconfont/amend、delete、add、search/iconfont.css">
    <link rel="" href="../bootstrap-3.4.1/fonts/glyphicons-halflings-regular.eot">
    <link rel="stylesheet" href="../css/yt/reserve.css">
    <link rel="stylesheet" href="../iconfont/amend、delete、add、search/iconfont.css">
    <script src="../jQuery/jquery-3.6.0.min.js"></script>
    <script src="../bootstrap-3.4.1/js/bootstrap.min.js"></script>
    <script src="../JavaScript/dataSaveAndGet.js"></script>
    <script src="../JavaScript/initializationData.js"></script>

</head>

<body class="clear">
    <header class="clear">
       <p>XX酒店后台管理系统</p>
       <div class="portrait clear">
        <!-- 头像 -->
            <div>
                <img src="../images/老板.webp" alt="">
            </div>
            <div id="quit">
                <p>工号:<span class="jobId"></span> &nbsp;欢迎你!
                </p>
                <button>退出<span class="iconfont icon-tuichu" ></span></button>
            </div>
       </div>
    </header>
    <!-- 主导航 -->
    <nav class="navbar navbar-default" id="mianNav">
        <div class="container-fluid">
            <!-- 主导航选项 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li><a href="./guestRoom.html">客房管理</a></li>
                    <li class="mianActive"><a href="./reserve.html">预定管理</a></li>
                    <li class=""><a href="./crm.html">房客管理</a></li>
                    <li class=""><a href="./orderForm.html">订单管理</a></li>
                    <li class=""><a href="./finance.html">财务管理</a></li>
                    <li class=""><a href="./staffManagement.html">员工管理</a></li>
                    <li class=""><a href="./personinMess.html">个人信息</a></li>
                    <li class=""><a href="./gonggao.html">公告</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <main class="clear">

        <!-- 查询预定信息 -->
            <nav class="navbar navbar-default">
                <div class="container-fluid">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="#">预定管理</a>
                    </div>
                    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                        <form class="navbar-form navbar-left searchForm">
                            <label for="inputEmail3" class="control-label" id="searchType">请选择搜索类型:</label>
                            <div class="form-group">
                                <select name="" id="typeOption" class="form-control">
                                    <option value="option1">订单号</option>
                                    <option value="option2">房间号</option>
                                    <option value="option3">客户</option>
                                </select>
                                <input type="text" class="form-control" placeholder="请输入客人姓名" id="OptionType">
                            </div>
                            <button class="btn btn-default" id="search">搜索</button>
                        </form>
                        <!-- 增加预定信息 -->
                        <div class="add clear">
                            <p class="iconfont icon-tianjia addInfo" data-toggle="modal" data-target="#addReserve"></p>
                            <span>增加预订</span>
                        </div>
                    </div>
                </div>
            </nav>


        <!-- 增加模态框 -->
        <div class="modal fade" id="addReserve" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="checkInOperationLabel">增加预订订单</h4>
                    </div>
                    <div class="modal-body">
                        <!-- 输入框 -->
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="tel" class="col-sm-3 control-label">订单号</label>
                                <div class="col-sm-9">
                                    <input type="tel" class="form-control" id="orderNum" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="tel" class="col-sm-3 control-label">房间号</label>
                                <div class="col-sm-9">
                                    <input type="tel" class="form-control" id="roomNum">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="sex" class="col-sm-3 control-label">入住时间</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="checkinTime">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="cashPledge" class="col-sm-3 control-label">离店时间</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="leaveTime">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remarks" class="col-sm-3 control-label">价格(元)</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="price" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remarks" class="col-sm-3 control-label">押金(元)</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="cash" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remarks" class="col-sm-3 control-label">入住人姓名</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="person">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remarks" class="col-sm-3 control-label">联系电话</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="tel">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remarks" class="col-sm-3 control-label">订单状态</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="orderStatus" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remarks" class="col-sm-3 control-label">操作人</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="operater" disabled>
                                </div>
                            </div>
                            
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal" id="cancel">取消</button>
                        <button class="btn btn-default" data-dismiss="modal"id="confirm">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 修改模态框 -->
        <div class="modal fade" id="checkInOperation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="checkInOperationLabel">修改预定信息</h4>
                    </div>
                    <div class="modal-body">
                        <!-- 输入框 -->
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="name" class="col-sm-3 control-label">订单号</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="orderNumMod" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="tel" class="col-sm-3 control-label">房间号</label>
                                <div class="col-sm-9">
                                    <input type="tel" class="form-control" id="roomNumMod">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="name" class="col-sm-3 control-label">预定时间</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="reserveTimeMod" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="sex" class="col-sm-3 control-label">入住时间</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="checkinTimeMod">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="cashPledge" class="col-sm-3 control-label">离店时间</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="leaveTimeMod">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remarks" class="col-sm-3 control-label">价格</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="priceMod">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remarks" class="col-sm-3 control-label">押金</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="cashMod">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remarks" class="col-sm-3 control-label">入住人姓名</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="personMod">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remarks" class="col-sm-3 control-label">联系电话</label>
                                <div class="col-sm-9">
                                    <input type="text" class="form-control" id="telMod">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="remarks" class="col-sm-3 control-label">订单状态</label>
                                <div class="col-sm-9">
                                    <!-- <input type="text" class="form-control" id="orderStatusMod"> -->
                                    <select class="form-control" id="orderStatusMod" value="">
                                        <option value="预定中">预定中</option>
                                        <option value="已完成">已完成</option>
                                        <option value="已失效">已失效</option>
                                    </select>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button class="btn btn-default" data-dismiss="modal">取消</button>
                        <button class="btn btn-default" data-dismiss="modal" id="confirm">确认修改</button>
                    </div>
                </div>
            </div>
        </div>
        <!-- 删除模态框 -->
        <div class="modal fade" id="delhint" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                  <h4 class="modal-title" id="myModalLabel">删除提示</h4>
                </div>
                <div class="modal-body">
                    是否确认删除
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                  <button type="button" class="btn btn-default" data-dismiss="modal" id="confirm">确认删除</button>
                </div>
              </div>
            </div>
          </div>
        <!-- 二级导航条 -->
        <table class="table table-striped" id="table">
            <thead>
                <tr>
                    <th>订单号</th>
                    <th>房间号</th>
                    <th>预定时间</th>
                    <th>入住时间</th>
                    <th>离店时间</th>
                    <th>价格(元)</th>
                    <th>押金(元)</th>
                    <th>客户</th>
                    <th>联系电话</th>
                    <th>订单状态</th>
                    <th>操作人</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="tBody">

            </tbody>
        </table>
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li id="pre">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li id="next">
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
        <!-- 查询无效模态框 -->
        <div class="modal fade" id="nocheck" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                </div>
                <div class="modal-body">
                
                </div>
            </div>
            </div>
        </div>
    </main>
    <footer>

    </footer>
    <script src="../JavaScript/yt/reserve.js"></script>
</body>

</html>